<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>人员树</title>
</head>
<style type="text/css">
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    background: #F4FBFE;
  }

  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
  }

  article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /*头部高度固定*/
  header {
    margin-top: 10px;
    width: 100%;
    height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
    overflow-y: auto;
  }

  .footerContainer {

    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
  }

  footer {
    width: 100%;
    height: 50px;
    padding-bottom: 10px;
    position: relative;
  }

  .searchTree {
    height: 40px;
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding-left: 10px;
  }

  input[type='button'] {
    height: 30px;
    padding-left: 7px;
    padding-right: 7px;
    border: 0;
  }

  input[type='button']:hover {
    cursor: pointer;
  }

  .yes {
    color: #409eff;
    background: #ecf5ff;
  }

  .cancel {
    background: #fdf6ec;
    color: #e6a23c;
  }

  .mySelectOnList {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  .checkedNode {
    padding: 0 5px;
    color: #409eff;
    height: 30px;
    border-radius: 5px;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    margin-right: 10px;
  }
</style>
<link href="../../../../js/layui/css/layui.css" rel="stylesheet"/>
<script src="../../../subassembly/common/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="../../../../js/layui/layui.js" type="text/javascript"></script>
<link href="../../../subassembly/tree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="../../../subassembly/tree/js/jquery.ztree.core.min.js"></script>
<script src="../../../subassembly/tree/js/jquery.ztree.exedit.min.js"></script>
<script type="text/javascript" src="../../../subassembly/tree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../subassembly/tree/js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="../../../subassembly/tree/js/fuzzysearch.js"></script>
<script type="text/javascript" src="../../../subassembly/common/underscore-min.js"></script>
<script type="text/javascript" src="../../../subassembly/common/common.js"></script>
<body>
<article>
  <header>
    <input type="text" class="searchTree" id="mySearchId" placeholder="请输入关键字">
    <ul class="mySelectOnList"></ul>
  </header>
  <main>
    <aside class="animated bounceInLeft" data-word="组件树">
      <ul id="treeDemo" class="ztree" style="border: 0;border-radius: 5px;padding-left: 10px;"></ul>
    </aside>
  </main>
  <footer>
    <aside class="footerContainer">
      <input type="button" class="yes" value="确定" onclick="toConfirm()">
      <input type="button" class="cancel" value="取消" onclick="cancel()">
    </aside>
  </footer>
</article>
<script>
  var currentNodeId = "";
  var currentNodeName = "";

  var setting = {
    check: {
      // 启用CheckBox框,需要引入jquery.ztree.excheck.js
      enable: true,
      chkStyle: "checkbox",
      chkboxType: {"Y": "ps", "N": "ps"},
      chkDisabledInherit: true
    },
    data: {
      simpleData: {
        // 启用简单的数据格式
        enable: true
      }
    },
    view: {
      /* fontCss : {color:"#0080cc"},*/
      showLine: false, // 不显示连接线
      showIcon: false,
      dblClickExpand: true,
      selectedMulti: true,//可以多选
    },
    callback: {
      beforeClick: function (treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        zTree.expandNode(treeNode);
      },
      onClick: function (event, treeId, treeNode) {
        currentNodeId = treeNode.id;
        currentNodeName = treeNode.name;
        // 在这里进行点击操作
        console.log("点击节点：" + currentNodeId + "：" + currentNodeName)
      },
      onCheck: function (event, treeId, treeNode) {
        // 获取所有选中节点
        var currentNodeList = [],
          zTree = $.fn.zTree.getZTreeObj("treeDemo"),
          allCheckedNodes = zTree.getCheckedNodes(true);
        console.log(allCheckedNodes);
        var html = "";
        allCheckedNodes.forEach(function (item) {
          if (item.level >= 2) {
            currentNodeList.push(item);
            html += "<input class='checkedNode' type='button' data-p-id='" + item.pId + "' data-id='" + item.id + "' value='" + (item.oldname ? item.oldname : item.name) + "'/>";
          } else {
            if (item.check_Focus) {
              // 选中非底层节点
            }
          }
        });
        $(".mySelectOnList").html(html);
        // console.log("当前选中的所有节点：" + JSON.stringify(currentNodeList));
        // console.log("点击checkbox：" +treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
      }
    }
  };

  // 默认加载
  $(function () {
    initTree();
  })

  //初始化业务树
  function initTree() {
    var url = "http://127.0.0.1:9009/myDemo";
    var isTimeOut = $.ajax({
      url: url,
      type: "POST",
      dataType: "json",
      timeout: 60000,
      contentType: 'application/json',
      success: function (res) {
        if (res.code == 1) {
          var param = _common_method.getUrlParam("nodes");
          if (param) {
            param = param.replace(";", ",");
            if (new RegExp(',$').test(param)) {
              param = param.substr(0, param.length - 1)
            }
          }
          if (param) {
            var nodes = param.split(",");
            for (var x = 0; x < nodes.length; x++) {
              for (var y = 0; y < res.data.length; y++) {
                if (nodes[x] == res.data[y].id) {
                  res.data[y].checked = true;
                  break;
                }
              }
            }
          }
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].pId) {
            } else {
              // 顶级节点无CheckBox
              res.data[i].nocheck = true;
              // 顶级节点默认展开
              res.data[i].open = true;
            }
          }
          $.fn.zTree.init($("#treeDemo"), setting, res.data);
          fuzzySearch('treeDemo', '#mySearchId', true, false); //初始化模糊搜索方法
          setting.callback.onCheck(null, null, null);
        } else {
          layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg("获取资源关系失败!", {icon: 5, anim: 6});
          });
        }
      }
      ,
      error: function (res, status) {
        if (status === 'timeout') {//超时,status还有success,error等值的情况
          isTimeOut.abort();
          layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg("连接超时, ajax请求设置时间太短!", {icon: 5, anim: 6});
          });
        } else {
          layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg("获取资源关系异常!", {icon: 5, anim: 6});
          });
        }
      }
      ,
      complete: function (res, status) {
        if (status === 'timeout') {//超时,status还有success,error等值的情况
          isTimeOut.abort();
        }
      }
    });
  }

  function toConfirm() {
// 获取所有选中节点
    var currentNodeList = [],
      zTree = $.fn.zTree.getZTreeObj("treeDemo"),
      allCheckedNodes = zTree.getCheckedNodes(true);
    var personList = "";
    var personString = "";
    allCheckedNodes.forEach(function (item) {
      if (item.level >= 2) {
        currentNodeList.push(item);
        personString += "[" + item.name + "] ";
        personList += item.id + ",";
      }
    });
    if(currentNodeList.length == 0) {
      layui.use('layer', function () {
        layer.msg("请先选中人员!", {icon: 5, anim: 6});
      });
      return;
    } else if(currentNodeList.length > 8) {
      layui.use('layer', function () {
        layer.msg("人员选中最多只能选中8个!", {icon: 5, anim: 6});
      });
      return;
    }
    // 添加一个锁
    var isLock = false;
    layui.use('layer', function () {
      var confirmIndex = layer.confirm("当前已选中"+personString+",是否确定？",{
        title: "人员选中",
        anim: 4,
        closeBtn: 1,
        btn : ["确定","取消"],
        yes : function () {
          if(!isLock) {
            isLock = true;
            console.log("save>>>>");
            console.log(personList)
          }
        },
        shade: [0.8, '#393D49'],
        shadeClose : false,
      });
    });
  }

  function cancel() {
    layui.use('layer', function () {
      parent.layer.closeAll('iframe'); //关闭所有页面层
    });
  }
</script>
</body>
</html>
